<template>
  <mk-card :element-busying-text="ui.loadingText"
           v-loading="ui.busying">
    <cp-resource-form v-if="ui.add || ui.edit"
                      @close="close"
                      :row="editRow"
                      :add-pid="addPid"
                      :is-add="ui.add"
                      :title="ui.title"
                      btn-name="保存" />
    <div slot="header">
      资源菜单
      <mk-button style="float: right;"
                 icon="el-icon-check"
                 @click="save"
                 :type="4">存储菜单结构</mk-button>
    </div>
    <el-tree :data="resources"
             node-key="id"
             show-checkbox
             v-auto-height="-65"
             ref="tree"
             default-expand-all
             :expand-on-click-node="false"
             :allow-drop="allowDrop"
             :allow-drag="allowDrag"
             :default-checked-keys="selectedRes"
             draggable>
      <span class="custom-tree-node"
            slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <mk-button :type="4"
                     v-if="node.level > 1"
                     @click="edit(data)">编辑</mk-button>
          <mk-button :type="4"
                     v-if="node.level < 4"
                     @click="add(node)">+资源</mk-button>
          <mk-button :type="4"
                     v-if="node.level > 1"
                     confirm-text="确定删除该资源?"
                     @click="del(data)">删除</mk-button>
        </span>
      </span>
    </el-tree>
  </mk-card>
</template>

<script>
import { MkBase } from 'element-ui'
import treeGener from 'element-ui/lib/utils/mk-business-util'
import CpResourceForm from './tree/form'
export default {
  name: 'resource-tree',
  props: {
    selectedRes: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      resources: [],
      ui: {
        busying: true,
        loadText: '加载中',
        add: false,
        edit: false,
        title: ''
      },
      editRow: null,
      addPid: null
    }
  },
  async mounted () {
    await this.loadResource()
  },
  methods: {
    add (row) {
      if (row.level === 1) {
        this.ui.title = '新建顶级资源'
        this.addPid = null
      } else {
        this.ui.title = `新建${row.label}子资源`
        this.addPid = row.data.id
      }
      this.editRow = null
      this.ui.add = true
    },
    edit (row) {
      this.ui.title = '编辑'
      this.editRow = row
      this.addPid = null
      this.ui.edit = true
    },
    async close (reload) {
      this.ui.add = false
      this.ui.edit = false
      if (reload === true) {
        await this.loadResource()
      }
    },
    allowDrop (draggingNode, dropNode, type) {
      if (dropNode.data.id === '000') {
        return type === 'inner'
      }
      return true
    },
    allowDrag (draggingNode) {
      return draggingNode.data.id !== '000'
    },
    loadResource: async function () {
      try {
        this.ui.busying = true
        let resourceList = await this.$get('/cpResource/list.json', {
          rebelongtype: this.rebelongtype
        })

        if (resourceList && resourceList.length > 0) {
          treeGener({
            source: resourceList,
            children: 'menus',
            label: 'resourcename',
            key: 'resourceid'
          })
        }
        this.singleSelectTreeResources = resourceList
        let topResources = [
          {
            istop: '1',
            id: '000',
            label: '全选',
            children: resourceList
          }
        ]

        this.resources = topResources
      } catch (e) {
      }
      this.ui.busying = false
    },
    _save (menus, items) {
      items.forEach(aitem => {
        const thisItem = {
          resourceid: aitem.id,
          menus: [],
          label: aitem.label
        }
        if (aitem.children) {
          this._save(thisItem.menus, aitem.children)
        }
        menus.push(thisItem)
      })
    },
    async save () {
      const res = []
      this._save(res, this.$refs.tree.children)
      this.ui.busying = true
      await this.$put(
        `/cpResource/save.json`,
        {
          menus: res[0].menus
        }
      )
      this.ui.busying = false
    },
    del: async function (obj) {
      this.ui.busying = true
      try {
        let result = await this.$delete(
          `/cpResource/${obj.id}/del.json`
        )

        if (result) {
          await this.loadResource()
        }
        this.ui.busying = false
      } catch (error) {
        this.ui.busying = false
      }
    },
    getCheckedKeys: function () {
      return this.$refs.tree.getCheckedKeys()
    }
  },
  mixins: [MkBase],
  components: { CpResourceForm }
}
</script>